<template>
  <div style="width: 100%;
        background-image: linear-gradient(328deg,#74ebd5,#acb6e5);
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;">
    <h2 style="font-weight: bold;font-size: 24px;margin-bottom: 5px;color: #fff;">欢迎使用掠空之翼聊天室</h2>
    <div class="loginOuterBox glass-container" style="position: relative;overflow: hidden;">
      <div class="loginBox">
        <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginRules"
            label-width="30%"
            label-position="left"
            status-icon
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username"
                      :prefix-icon="User"
                      clearable autocomplete="off" style="width: 230px"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
                v-model="loginForm.password"
                :prefix-icon="Lock"
                show-password
                type="password"
                autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="验证码" prop="captchaCode">
            <el-input
                v-model="loginForm.captchaCode"
                autocomplete="off"
                style="width: 100px; margin-right: 5px"
            />
            <el-image style="width: 90px;height: 25px" @click="getCaptchaImg(0)" :src="loginForm.captchaImg"/>
          </el-form-item>

          <el-form-item>
            <el-button @click="resetLoginForm">清空</el-button>
            <el-button type="primary" @click="loginHandle">登录</el-button>


          </el-form-item>

        </el-form>

      </div>
      <div class="registerBox">
        <el-form
            ref="registerRef"
            :model="registerForm"
            :rules="registerRules"
            label-width="30%"
            label-position="left"
            status-icon
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="registerForm.username"
                      :prefix-icon="User"
                      clearable autocomplete="off" style="width: 230px"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
                v-model="registerForm.password"
                :prefix-icon="Lock"
                show-password
                type="password"
                autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
                v-model="registerForm.confirmPassword"
                :prefix-icon="Lock"
                show-password
                type="password"
                autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="验证码" prop="captchaCode">
            <el-input
                v-model="registerForm.captchaCode"
                autocomplete="off"
                style="width: 100px; margin-right: 5px"
            />
            <el-image style="width: 90px;height: 25px" @click="getCaptchaImg(1)" :src="registerForm.captchaImg"/>
          </el-form-item>

          <el-form-item>
            <el-button @click="resetRegisterForm">清空</el-button>
            <el-button type="primary" @click="registerHandle">注册</el-button>
          </el-form-item>

        </el-form>
      </div>
      <div class="maskBox" :style="{ left: mask.maskPosition }">
        <el-button type="primary" style="position: absolute;bottom: 10%;" @click="switchButtonClick">
          {{ mask.switchButtonText }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>

import {User, Lock} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: 'login',
  computed: {
    User() {
      return User
    },
    Lock() {
      return Lock;
    }
  },
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        captchaCode: '',
        captchaImg: '',
        key: ''
      },
      loginRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        captchaCode: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, max: 5, message: "验证码必须为5位", trigger: 'blur'}
        ]
      },
      registerForm: {
        username: '',
        password: '',
        confirmPassword: '',
        captchaCode: '',
        captchaImg: '',
        key: ''
      },
      registerRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        captchaCode: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, max: 5, message: "验证码必须为5位", trigger: 'blur'}
        ]
      },
      mask: {
        maskPosition: '50%',
        switchButtonText: "去注册 -> "
      }
    }
  },
  methods: {
    switchButtonClick() {
      if (this.mask.maskPosition === '0') {
        this.resetRegisterForm()
        this.mask.maskPosition = '50%'
        this.mask.switchButtonText = "去注册 ->"
      } else {
        this.resetLoginForm()
        this.mask.maskPosition = '0'
        this.mask.switchButtonText = "<- 去登录"
      }
    },
    getCaptchaImg(flag) {
      request.get("/captcha").then(res => {

        if (flag === 0) {
          //   如果为 0 则为登录表单的验证码
          this.loginForm.captchaImg = res.data.img
          this.loginForm.key = res.data.key
        } else {
          //   否则为注册表单的验证码
          this.registerForm.captchaImg = res.data.img
          this.registerForm.key = res.data.key
        }
      }, err => {
        console.log(err)
      })
    },
    resetLoginForm() {
      // this.loginForm.username = ''
      // this.loginForm.password = ''
      // this.loginForm.captchaCode = ''
      this.$refs.loginFormRef.clearValidate()
      this.$refs.loginFormRef.resetFields()
    },
    resetRegisterForm() {
      // this.registerForm.username = ''
      // this.registerForm.password = ''
      // this.registerForm.confirmPassword = ''
      // this.registerForm.captchaCode = ''
      this.$refs.registerRef.resetFields()
      this.$refs.registerRef.clearValidate()
    },
    loginHandle() {
      this.$refs.loginFormRef.validate((flag) => {
        if (flag) {
          request.post("/login", this.loginForm).then(
              res => {
                localStorage.setItem('jwt', res.data.jwt);
                //   跳转到/index
                this.$router.push("/")

                ElMessage({
                  message: '登录成功！欢迎使用！',
                  type: 'success',
                })
              },
              err => {
                this.getCaptchaImg(0)
              }
          )

        }
      })
    },
    registerHandle() {
      // 判断两次密码是否一致
      if (!(this.registerForm.password === this.registerForm.confirmPassword)) {
        ElMessage.error("两次密码不一致, 请检查后重新输出！")
        return
      }


      this.$refs.registerRef.validate((isValid) => {
        if (isValid) {
          //   表单有效，进行请求
          request.put("/register", this.registerForm).then(
              res => {
                ElMessage.success("注册成功！")
                this.switchButtonClick()
              },
              reject => {
                console.log(reject)
              }
          )
        }
      })
    }


  },
  mounted() {
    this.getCaptchaImg(0);
    this.getCaptchaImg(1);
  }
}

</script>

<style scoped>

.loginOuterBox {
  background: white;
  width: 60%;
  height: 70%;
}

.glass-container {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  backdrop-filter: blur(14px);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
  border: 2px rgba(255, 255, 255, 0.4) solid;
  border-bottom: 2px rgba(40, 40, 40, 0.35) solid;
  border-right: 2px rgba(40, 40, 40, 0.35) solid;
}

.loginBox, .registerBox {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.maskBox {
  width: 50%;
  height: 100%;
  transition: all .2s ease;
  background-color: white;
  background-image: url("https://www.2008php.com/2020_Website_appreciate/2020-02-27/20200227214327.jpg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>